<template>
  <div
    class="full-width full-height relative family-syht"
    style="overflow:hidden;overscroll-behavior-y: contain;"
  >
    <span
      class="absolute pointer pd8 color-white active-bg"
      style="right:10px;top:10px;z-index: 999;border-radius:20%"
      @click="goInitView"
    >
      <i
        class="el-icon-s-promotion size28"
        :style="{ fontSize: `${28 * scaleNum}px` }"
      ></i>
    </span>
    <danwei-info
      :paidanData="paidanData"
      ref="danweiInfo"
      :scaleNum="scaleNum"
      :danweiData="danweiData"
      :isActive="isActive"
      :companyAll="companyAll"
    />
    <span
      class="absolute color-white pointer  active-bg pdsz510"
      style="z-index:9999;"
      :style="{
        bottom: `${512 * scaleNum}px`,
        fontSize: `${18 * scaleNum}px`,
        padding: `${5 * scaleNum}px ${10 * scaleNum}px`,
        right: `${10 * scaleNum}px`
      }"
      @click="showCompanyBox = !showCompanyBox"
      >{{ showCompanyBox ? "收起" : "展开" }}
      <i
        :class="
          showCompanyBox ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'
        "
      ></i
    ></span>
    <transition name="el-zoom-in-top" v-if="showCompanyBox">
      <danwei-box
        style="z-index: 9999"
        :scaleNum="scaleNum"
        @setCompanyData="getCompanyData"
        @setCompanyInfo="setCompanyInfo"
      />
    </transition>
    <!-- <div class="absolute " style="z-index:99999">{{ tagGroup }}</div> -->
    <!-- @mouse-move="toTag(tag, $event)" -->
    <entity-billboard
      @left-click="toTag(tag)"
      v-for="tag in tagGroup"
      :properties="tag"
      :auto-zoom="false"
      :key="'billboard_company_' + tag.id"
    >
    </entity-billboard>
    <!--动态圆 -->
    <!-- <entity-ellipse
      v-for="label in warrningGroup"
      :properties="label"
      :auto-zoom="false"
      :key="'warrningGroup_' + label.id"
    /> -->
  </div>
</template>
<script>
import { EntityBillboard, EntityEllipse, generator } from "@/components/Cesium";
import {
  suizhiguanGetCompanyList,
  workOrderPaidanList as paidanApi
} from "@/api";
// import autofit from "autofit.js";
import {
  Math as cesiumMath,
  Cartesian3,
  Color,
  SceneTransforms,
  Ellipsoid,
  camera,
  BoundingSphere
} from "cesium";
var coordtransform = require("coordtransform");
console.log("coordtransform===");
console.log(coordtransform);
import { viewerInherit, contnt } from "@/mixins/cesium";
import { PM } from "@/components/Cesium/projectMethods";
import danweiInfo from "./danweiInfo";
export default {
  components: {
    EntityBillboard,
    EntityEllipse,
    danweiInfo
  },
  mixins: [viewerInherit, contnt],
  data() {
    return {
      companyData: [],
      companyAll: [],
      nowHoverId: 0,
      showCompanyBox: true,
      danweiData: {},
      isActive: false,
      paidanTimer: null,
      paidanData: []
    };
  },
  watch: {},
  destroyed() {
    if (this.paidanTimer) {
      clearTimeout(this.paidanTimer);
    }
  },
  mounted() {
    // window.addEventListener("resize", () => {
    //   let width = window.screen.width;
    //   this.scaleNum = width / 1920;
    // });
    this.getPaidan();
    setTimeout(() => {
      this.goInitView();
    }, 10000);
  },
  computed: {
    scaleNum() {
      let width = document.body.clientWidth;
      let setWidth = 1;
      if (width > 1920) {
        setWidth = document.body.clientWidth / 1920;
      } else {
      }
      return setWidth;
    },
    autofix() {
      return this.$route?.query?.autofix;
    },
    /**
     * 动态圆会卡顿 隐藏
     */
    warrningGroup() {
      if (!this.paidanData.length) return [];
      return this.companyAll.map(i => {
        i.height = 0;
        return {
          height: 0,
          position: generator.positionItem({
            lat: Number(i.lat),
            lng: Number(i.lng)
          }),
          semiMinorAxis: 200, //长半轴
          semiMajorAxis: 200, //短半轴
          ...i,
          material: generator.materialCircleWaveMaterialItem({
            duration: 4000,
            gradient: 0.3,
            count: 2,
            color: "#f45a5c"
          })
        };
      });
    },
    tagGroup() {
      if (!this.companyAll?.length) return [];
      return this.companyAll.map((e, index) => {
        //国测局坐标转wgs84坐标
        let position = coordtransform.gcj02towgs84(
          Number(e.lng),
          Number(e.lat)
        );
        return {
          ...e,
          id: e.companyId,
          position: {
            lng: position[0] || 0,
            lat: position[1] || 0,
            height: this.paidanData.find(
              ev => Number(ev.companyId) == e.companyId
            )
              ? 50 * this.scaleNum
              : 0
          },
          width: this.paidanData.find(ev => Number(ev.companyId) == e.companyId)
            ? 60 * this.scaleNum
            : 60 * this.scaleNum,
          height: this.paidanData.find(
            ev => Number(ev.companyId) == e.companyId
          )
            ? 100 * this.scaleNum
            : 100 * this.scaleNum,
          color: this.paidanData.find(ev => Number(ev.companyId) == e.companyId)
            ? Color.fromCssColorString("#f45a5d")
            : this.nowHoverId == e.companyId
            ? Color.PINK
            : Color.white, // default: WHITE
          image: this.paidanData.find(ev => Number(ev.companyId) == e.companyId)
            ? "/fabu-admin/imgs/tag_warning.png"
            : this.nowHoverId == e.companyId
            ? "/fabu-admin/imgs/tag1.png"
            : "/fabu-admin/imgs/tag.png"
        };
      });
    }
  },

  methods: {
    goInitView() {
      let danwei = document.getElementById("danweiInfo");
      danwei.style.opacity = 0; //线隐藏 后显示
      this.initialView = {
        lng: 113.34150363560663,
        lat: 23.106985017156045,
        height: 26398.542546012533,
        heading: 35.76968656469069,
        pitch: -83.31381782108008,
        roll: 359.9985641376554
      };
      this.$nextTick(() => {
        this.flyToInitialView();
      });
    },
    async toTag(param, isActive) {
      let danwei = document.getElementById("danweiInfo");
      danwei.style.opacity = 0; //线隐藏 后显示
      this.isActive = isActive;
      this.nowHoverId = param.id;
      //   let ev = event.startPosition;
      let data = param;
      //国测局坐标转wgs84坐标
      let coordCosition = coordtransform.gcj02towgs84(
        Number(data.lng),
        Number(data.lat)
      );
      const bs = new BoundingSphere(
        Cartesian3.fromDegrees(coordCosition[0], coordCosition[1], 50),
        800
      );
      let that = this;
      let cartesian3 = Cartesian3.fromDegrees(
        coordCosition[0],
        coordCosition[1],
        300
      );
      this.viewer.camera.flyToBoundingSphere(bs, {
        complete: () => {
          let cartesian2 = SceneTransforms.wgs84ToWindowCoordinates(
            this.viewer.scene,
            cartesian3
          );
          that.danweiData = data;
          that.$nextTick(() => {
            that.$refs.danweiInfo.getInfoCompany();
          });
          danwei.style.opacity = 1;
          danwei.style.left = cartesian2?.x + 10 * this.scaleNum + "px";
          danwei.style.top = cartesian2?.y + 10 * this.scaleNum + "px";
          danwei.style.zIndex = 9999;
        }
      });
    },
    setCompanyInfo(data) {
      //   let c3 = Cartesian3.fromDegrees(Number(data.lng), Number(data.lat), 4);
      //   let position = SceneTransforms.wgs84ToWindowCoordinates(
      //     this.viewer.scene,
      //     c3
      //   );

      this.toTag(data, true);
    },
    async getCompanyData(data) {
      this.companyAll = [];
      data?.forEach(item => {
        item.fuwuList.forEach(fuw => {
          this.companyAll.push(fuw);
        });
      });
    },
    async getPaidan() {
      if (this.paidanTimer) {
        clearTimeout(this.paidanTimer);
      }
      let { data } = await paidanApi({
        page: 1,
        size: 100,
        status: "0",
        sysUserName: ""
      });
      this.paidanData = data?.list || [];

      this.paidanTimer = setTimeout(() => {
        this.getPaidan();
      }, 10000);
    }
  }
};
</script>
